<template>
  <!-- 
   1:注意写注释

 -->
  <div class="departments">
    <el-card>
      <template #header>
        {{ $t('route.departments') }}
      </template>
      <div class="main">
        <!-- 抽离树形控件选项
           1：components/treeItem.vue
           2:加入对应的结构
           3：在父组件使用上 

           数据获取与渲染
           1：定义获取数据api
           2:导入与调用
           3：将数据转换成树形结构
           4：渲染出来

         -->
        <!-- 只保留添加子部门 -->
        <TreeItem :itemData="topInfo" @getData="getData"></TreeItem>
        <hr />
        <el-tree :data="treeData">
          <template v-slot="{ data }">
            <TreeItem :itemData="data" @getData="getData"></TreeItem>
          </template>
        </el-tree>
      </div>
    </el-card>
    <!-- 弹框一般我们都封装成单独组件 -->
    <!-- 使用兄弟组件传值，打开弹框
    1：兄弟组件传值使用
       a:Vue.prototype.$bus=new Vue()
       b:
          监听：  this.$bus.$on('事件名',(参数)=>{})
          触发:   this.$bus.$emit('事件名',实参值)
          销毁：  this.$bus.$off('事件名')
     2：Add：监听+销毁
     3：TreeItem：触发，让弹框打开与关闭
    
    
     -->
    <Add :initData="initData" @getData="getData"></Add>
  </div>
</template>
<script>
import TreeItem from './components/TreeItem.vue'
import { companyDepartment } from '@/api/departments'
import Add from './components/Add.vue'
export default {
  components: {
    TreeItem,
    Add
  },
  data () {
    return {
      topInfo: {
        isTop: true,
        name: '传智教育',
        manager: '负责人',
        id: ''
      },
      treeData: [],
      initData: [] // 没有转换前的组织架构列表数据
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await companyDepartment()
      // 只需要渲染顶级部门
      // this.treeData = res.data.depts
      // 找顶级部门
      this.initData = res.data.depts
      this.treeData = this.changeData(res.data.depts, '')
      // console.log('this.treeData', this.treeData)
      // 我要找出财务部子集部门
      // console.log(
      //   '财务部子集',
      //   this.changeData(res.data.depts, '604e2251b205b95968e1312c')
      // )
    },
    // 树形数据转换基本转换写法
    changeData (arr, str) {
      // return arr.filter(item => item.pid === str)
      return arr.filter(item => {
        if (item.pid === str) {
          // 使用基本的递归找出子集
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.departments {
  padding: 15px;
  .main {
    width: 80%;
    margin: 0 auto;
  }
}
</style>
